import { BellOutlined } from '@ant-design/icons';
import { Badge, Spin, Tabs } from 'antd';
import useMergeValue from 'use-merge-value';
import React from 'react';
import classNames from 'classnames';
import NoticeList from './NoticeList';
import HeaderDropdown from '../HeaderDropdown';
import styles from './index.less';

const { TabPane } = Tabs;

const NoticeIcon = props => {
    const getNotificationBox = () => {
        const {
            children,
            loading,
            onClear,
            onTabChange,
            onItemClick,
            onViewMore,
            clearText,
            viewMoreText,
        } = props;

        if (!children) {
            return null;
        }

        const panes = [];
        React.Children.forEach(children, child => {
            if (!child) {
                return;
            }

            const { list, title, count, tabKey, showClear, showViewMore } = child.props;
            const len = list && list.length ? list.length : 0;
            const msgCount = count || count === 0 ? count : len;
            const tabTitle = msgCount > 0 ? `${title} (${msgCount})` : title;
            panes.push(
                <TabPane tab={tabTitle} key={tabKey}>
                    <NoticeList
                        clearText={clearText}
                        viewMoreText={viewMoreText}
                        data={list}
                        onClear={() => onClear && onClear(title, tabKey)}
                        onClick={item => onItemClick && onItemClick(item, child.props)}
                        onViewMore={event => onViewMore && onViewMore(child.props, event)}
                        showClear={showClear}
                        showViewMore={showViewMore}
                        title={title}
                        {...child.props}
                    />
                </TabPane>,
            );
        });
        return (
            <Spin spinning={loading} delay={300}>
                <Tabs className={styles.tabs} onChange={onTabChange}>
                    {panes}
                </Tabs>
            </Spin>
        );
    };

    const { className, count, bell } = props;
    const [visible, setVisible] = useMergeValue(false, {
        value: props.popupVisible,
        onChange: props.onPopupVisibleChange,
    });
    const noticeButtonClass = classNames(className, styles.noticeButton);
    const notificationBox = getNotificationBox();
    const NoticeBellIcon = bell || <BellOutlined className={styles.icon} />;
    const trigger = (
        <span
            className={classNames(noticeButtonClass, {
                opened: visible,
            })}
        >
            <Badge
                count={count}
                style={{
                    boxShadow: 'none',
                }}
                className={styles.badge}
            >
                {NoticeBellIcon}
            </Badge>
        </span>
    );

    if (!notificationBox) {
        return trigger;
    }

    return (
        <HeaderDropdown
            placement="bottomRight"
            overlay={notificationBox}
            overlayClassName={styles.popover}
            trigger={['click']}
            visible={visible}
            onVisibleChange={setVisible}
        >
            {trigger}
        </HeaderDropdown>
    );
};

NoticeIcon.defaultProps = {
    emptyImage: 'https://gw.alipayobjects.com/zos/rmsportal/wAhyIChODzsoKIOBHcBk.svg',
};
NoticeIcon.Tab = NoticeList;
export default NoticeIcon;
